<template>
	<el-container class="wrapper">
	  <el-aside width="200px" class="right-menu" >
		  <el-menu router  >
			<el-menu-item index="/orders" @click=order(Data1,0)><img :src="Order" class="icon" />全部订单</el-menu-item>
			<el-menu-item index="/paid" @click=order(Data1,1)><img :src="Paid" class="icon" />已付款</el-menu-item>
			<el-menu-item index="/unpaid" @click=order(Data1,2)><img :src="Unpaid" class="icon" />未付款</el-menu-item>
			<el-menu-item index="/pickup" @click=order(Data1,3)><img :src="Picup" class="icon" />待取货</el-menu-item>
		  </el-menu>
	  </el-aside>
	  <div class="main">
		  <el-main >
			  <router-view />
		  </el-main>		  
		  <el-footer >
			  <el-pagination
				background 
				layout="total, sizes, prev, pager, next, jumper"
				:total="40"
				v-model:current-page="params.pageNo"
				style="margin:60px auto;"
			  />
		  </el-footer>
	  </div>
	</el-container> 
</template>

<script setup>
import {reactive} from 'vue'
import { onMounted, ref } from 'vue'
import { useRoute,useRouter } from 'vue-router';
import Order from '@/components/icons/订单.svg';
import Paid from '@/components/icons/paid.svg';
import Unpaid from '@/components/icons/unpaid.svg';
import Picup from '@/components/icons/picup.svg'
const route = useRoute()
const SearchKey = ref('')
const router = useRouter()

onMounted(()=>{
	SearchKey.value=route.query.SearchKey
})

// 商品信息跳转方法
const order = (Data1,status) => {
	console.log(Data1)
	if(status==0){
		router.push({
		path: '/orders',
  		query: { item: JSON.stringify(Data1),status }
	});
	}
	else if(status==1){
		router.push({
		path: '/paid',
  		query: { item: JSON.stringify(Data1),status }
	});
	}else if(status==2){
		router.push({
		path: '/unpaid',
  		query: { item: JSON.stringify(Data1),status }
	});
	}else{
		router.push({
		path: '/pickup',
  		query: { item: JSON.stringify(Data1),status }
	});
	}
	
}
const params = reactive({
	pageNo: 1,
	pageSize: 5
})

const Data1= ref([
	{
		goodsInfo: '湿纸巾',
	    price: '8.91',
		num:'3',
		sum:'26.73',
		status: '待收货'
	},
	{
		goodsInfo: '即食型血耳莲子羹',
	    price: '23.56',
		num:'1',
		sum:'23.56',
		status: '已付款'		
	},
	{
		goodsInfo: '保康血耳香皂',
	    price: '36.90',
		num:'2',
		sum:'73.8',
		status: '待收货'		
	},
	{
		goodsInfo: '保康血耳精油',
	    price: '55.63',
		num:'1',
		sum:'55.63',
		status: '未付款'		
	},
	{
		goodsInfo: '燕窝血耳果胶',
	    price: '180.00',
		num:'3',
		sum:'540.00',
		status: '待收货'		
	},
	{
		goodsInfo: '血耳雪梨糖水',
	    price: '16.50',
		num:'1',
		sum:'16.50',
		status: '未付款'		
	},
	{
		goodsInfo: '血耳珍珠滋养霜',
	    price: '49.60',
		num:'1',
		sum:'49.60',
		status: '已付款'		
	}
])
</script>

<style lang="scss" scoped>
$xrborder: 1px solid #cccccc;
.wrapper{
	width: 1200px;
	height: 100vh;
	margin-right: 40px;
	.el-menu-item{
		font-size: 18px;
		color:forestgreen;
		//margin-left:29%;
		width:100%;
		border-radius: 10px;
    padding: 30px 0px;
    background-color:#F0CEB9 ;//#F0CEB9//#f5f7fa
	}
	.icon{
		width: 25px;
		margin-right:5px;
		margin-left: 10%;
	}
	.main{
		border-left: $xrborder;
		width: 1300px;
		position: relative;
		.el-pagination{
			position: absolute;
			bottom: 10px;
			right: 80px;
		}
    }
}

</style>